<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            #{ managerCriarBairro.bairro.id == null ? 'Cadastrar Bairro' : 'Editar Bairro' }
        </ui:define>

        <ui:define name="content">
            <h:form id="criarBairroForm" enctype="multipart/form-data">           

                <p:messages id="criarBairroMessages" autoUpdate="true" />

                <div class="actions">
                    <div id="buttons">

                        <p:button value="Pesquisar" outcome="indexBairro.xhtml"
                                icon="ui-icon-search"
                                styleClass="ui-priority-primary">
                            
                        </p:button>
                    </div>
                </div>

                <p:fieldset legend="Dados" id="dadosFieldset">

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Nome" for="nomeBairroInputText" />
                        </div>
                        <div class="column8">
                            <p:inputText id="nomeBairroInputText" value="#{ managerCriarBairro.bairro.nome }"
                                required="true" requiredMessage="Nome é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Cidade" for="cidadeAutoComplete" />
                        </div>
                        <div class="column8">
                            <p:autoComplete id="cidadeAutoComplete" value="#{ managerCriarBairro.bairro.cidade }"
                                forceSelection="true" dropdown="true" var="cidade" itemValue="#{ cidade }" 
                                itemLabel="#{ cidade.nome }" completeMethod="#{ managerCriarBairro.autocompletarCidade }"
                                converter="conversorcidade" minQueryLength="3" required="true"
                                requiredMessage="Cidade é obrigatório" />
                        </div>
                    </div>                    

                </p:fieldset>
                
                <div class="command">
                    <p:commandButton actionListener="#{ managerCriarBairro.salvar() }"
                        styleClass="ui-priority-primary"
                        value="Salvar" update="@form" icon="ui-icon-disk"
                        oncomplete="widthFix();"  onsuccess="goY(0);"/>
                    <p:button value="Cancelar" href="indexBairro.xhtml" icon="ui-icon-cancel" />
                </div>                 
                
            </h:form>
        </ui:define>
    </ui:composition>

</html>